<template>
   <div class="container">
    <div class="left">
      <img :src="imgUrl" alt="" />
    </div>

    <div class="right">

        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span> BeatHub后台管理系统 </span>
                </div>

            </template>

            <el-form ref="frmRef" label-position="right" label-width="80px" :model="stufrm" :rules="rules"
                style="max-width: 400px">
                <br />
                <el-form-item label="用户名" prop="uname">
                    <el-input v-model="stufrm.uname" placeholder="请输入" />
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input v-model="stufrm.password" placeholder="请输入" />
                </el-form-item>
                <br />
                <div class="btnclass">
                    <el-button @click="loginBtn" type="danger" style="width: 100px;">登录</el-button>
                    <el-button type="danger" style="width: 100px;">重置</el-button>
                </div>
            </el-form>
        </el-card>

        </div>
    </div>
</template>

<script>

//import imgPath from "/src/律动社.gif"
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            //iimgUrl: mgPath,
            // loginpowerData:{},
            stufrm: {
                uname: "",
                password: ""
            },
            rules: {
                uname: [
                    { required: true, message: '请输入用户名', trigger: 'blur', },
                    { min: 2, max: 10, message: '用户名长度为2-10', trigger: 'blur', }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur', },
                    { min: 6, max: 12, message: '密码长度为6-12', trigger: 'blur', }
                ]
            }
        }
    },
    methods: {
        loginBtn() {
                //this.$http.get("http://localhost:8080/loginpower/login?adminname=" +this.stufrm.uname).then((res) => {
                    // this.loginpowerData = res.data;
                    // console.log(res.data);
                    // if(res.data[0].adminname==null){
                    //     console.log("登录失败！");
                    // ElMessage({
                    //     showClose: true,
                    //     message: '账号密码错误！',
                    //     type: 'warning',
                    // })
                    // }else{
                    //         //继续，校验密码是否正确
                    //         if(res.data[0].password!=this.stufrm.password){
                    //             ElMessage({
                    //         showClose: true,
                    //         message: '账号密码错误！',
                    //         type: 'warning',
                    //          })                        
                    //         }else{
                    //                 if(res.data[0].adminsort=="普通管理员"){
                    //                 console.log("登录成功！");
                                    localStorage.setItem("userPower", 100)
                                    // ElMessage({
                                    //     showClose: true,
                                    //     message: '登录成功！',
                                    //     type: 'success',
                                    // })
                                    // this.$router.push({
                                    //     path: "/welcome"
                                    // })
                                    // }else{
                                    //     console.log("登录成功！");
                                    //     localStorage.setItem("userPower",200)
                                    //     ElMessage({
                                    //     showClose: true,
                                    //     message: '登录成功！',
                                    //     type: 'success',
                                    // })
                                    this.$router.push({
                                        path: "/welcome"
                                    })
                                        
            //                         }
            //             }
            //         }
            //     }).catch((err) => {
            //         console.log(err)
            //     })
            // // console.log(this.stufrm)
        }
    },
}
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 使用视口高度作为容器高度 */
}

.left, .right {
  flex: 1; /* 让左右两部分平分父容器的空间 */
}

.left {
  display: flex;
  justify-content: flex-end; /* 图片右对齐 */
  padding-right: 50px; /* 右边距 */
}

.right {
  display: flex;
  justify-content: flex-start; /* 内容左对齐 */
  padding-left: 50px; /* 左边距 */
}
.login {
    height: 250px;
    background-color: white;
    background-size: 0px;
    background-position-x: right;
    background-position-y: bottom;
    display: flex;
    align-items: right;
    justify-content: right;
    padding-top: 125px;
    padding-right: 100px;



}

.card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    color: black;
}

.el-button {
    width: 100%;
}

.btnclass {
    display: flex;
    justify-content: space-between;
    padding-left: 50px;
    padding-right: 50px;
}

.text {
    font-size: 14px;
}

.img {
    position: absolute;
    padding-top: 25px;
    padding-left: 90px;
}

.box-card {
    width: 400px;
    height: 300px;
    background-color: white;
}
</style>
